<template>
<div class="page-container">
    <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
             <el-row class="search-input">
                <el-form-item prop="operator" label="变量符号：">
                    <el-select v-model="filters.operator" placeholder="变量符号">
                        <el-option label="实体卡账户" value="1"></el-option>
                        <el-option label="电子卡账户" value="2"></el-option>
                        <el-option label="实物账户" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row class="search-button">
                <el-form-item>
                    <kt-button label="查询" type="primary" @click="findPage(null)"  />
                </el-form-item>
                </el-row>
        </el-form>
    </div>

    <!--表格内容栏-->
    <Jic-table
        :height="350"
        :data="pageResult"
        :columns="filterColumns"
        @findPage="findPage"
        :showBatchDelete="false"
        :showDetailOperation="false"
        :showDeleteOperation="false"
        @handleEdit="handleEdit"
        ref="JicTable">
    </Jic-table>
</div>
</template>

<script>
import JicTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
export default {
    components: {
        JicTable,
        KtButton
    },
    data() {
        return {
            pageResult: {},
            pageRequest: { pageNum: 1, pageSize: 10 },
            size: "small",
            filterColumns: [],
            columns: [{ prop: "areaCode", label: "时间", minWidth: 120},
                { prop: "areaName", label: "金额变动",minWidth: 120},
                { prop: "merchantName", label: "京东订单号",minWidth: 120},
                { prop: "merchantId", label: "系统订单号", minWidth: 120},
                { prop: "coverageType", label: "产品名称", minWidth: 120},
                { prop: "coverageType", label: "订单状态", minWidth: 120},
                { prop: "coverageType", label: "真实支付", minWidth: 120},
                { prop: "coverageType", label: "结算价", minWidth: 120},
                { prop: "coverageType", label: "退款状态", minWidth: 120},
                { prop: "coverageType", label: "部分退款金额", minWidth: 120},
                { prop: "coverageType", label: "京东备注信息", minWidth: 120}
            ],
            formLabelWidth: "120px",
            filters: {
                start: 1,
                limit: 10
            }, 
        };
    },
    mounted() {
        this.initColumns();
        this.findPage();
    },
    methods: {
        
        // 处理表格列过滤显示
        initColumns: function() {
        var temp = [];

        $.each(this.columns, function(key, val) {
            temp.push(val);
        });
        this.filterColumns = temp;
        },
      
        findPage: function (data) {
            let that = this;
            if (data != null && data.start != null) {
                if (data.start != null) {
                this.pageRequest.pageNum = data.start;
                }
                if (data.limit != null) {
                this.pageRequest.pageSize = data.limit;
                }
            }
            if (that.filters == undefined || that.filters == null) {
                that.filters = {};
            }
            that.filters.start = this.pageRequest.pageNum;
            that.filters.limit = this.pageRequest.pageSize;
            this.utils.request.getRegionPageList(that.filters, function (res) {
                that.loading = false;
                if (res.data == null) {
                    res.data = [];
                    res.totle = 0;
                } else {
                    res.data = [];
                    res.totle = 0;
                    //静态页面
                    // that.$refs.JicTable.findPage({content: res.data.rows, total: res.data.total});
                }
            });
        },
    }
};
</script>

<style scoped lang='scss'>
</style>
